import '@/assets/css/index.less';
import { getVideoInfoList } from '@/services/videoManager';
import { formatDate } from '@/utils/formatDate';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Modal } from 'antd';
import { useEffect, useState } from 'react';

const VideoSelector = (props) => {
  const [form] = Form.useForm();
  const [videoHttpUrl, setVideoHttpUrl] = useState('');
  const [playerModal, setPlayerModal] = useState(false);
  const columns = [
    {
      title: '缩略图',
      align: 'center',
      hideInSearch: true,
      dataIndex: 'coverImage',
      render: (_, record) => [
        <img
          style={{
            width: 80,
            height: 100,
            cursor: 'pointer',
          }}
          onClick={() => {
            setVideoHttpUrl(record.httpurl);
            setPlayerModal(true);
          }}
          src={record.coverImage}
          alt=""
          srcset=""
        />,
      ],
    },
    {
      title: '主题',
      align: 'center',
      hideInSearch: true,
      dataIndex: 'title',
    },
    {
      title: '发布者',
      align: 'center',
      hideInSearch: true,
      dataIndex: 'createBy',
    },
    {
      title: '发布时间',
      align: 'center',
      hideInSearch: true,
      dataIndex: 'createTime',
    },
  ];

  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [total, setTotal] = useState(40);
  const [dataArray, setDataArray] = useState([]);
  const [pagination, setPagination] = useState({
    current: page,
    pageSize: pageSize,
    position: ['bottomRight'],
    size: 'small',
    showSizeChanger: true,
    total: total,
  });
  const [selectedRows, setSelectedRows] = useState();
  const [videoSeletorOpen, setVideoSeletorOpen] = useState(false);
  const queryData = async () => {
    let values = form.getFieldsValue();
    const params = {
      page: page,
      pageSize: pageSize,

      ...values,
    };
    const videoSearchForm = {};

    const msg = await getVideoInfoList(params, videoSearchForm);
    const dataArray = formatDate(msg && msg.data?.list, 'createTime', 'YYYY-MM-DD');
    setDataArray(dataArray);
    setPagination({ ...pagination, total: msg.data?.total });
  };

  useEffect(() => {
    queryData();
  }, [page, pageSize]);
  const changeVideo = () => {
    setVideoSeletorOpen(true);
  };
  const handleTableChange = (pagination) => {
    setPagination(pagination);
    setPage(pagination.current);
    setPageSize(pagination.pageSize);
  };
  return (
    <div
      style={{
        display: 'inline-block',
      }}
    >
      <Button size="small" id="add_video" onClick={changeVideo}>
        +
      </Button>

      <Modal
        open={videoSeletorOpen}
        onCancel={() => {
          setVideoSeletorOpen(false);
        }}
        onOk={() => {
          props.submitVideo(
            selectedRows && selectedRows[0].id,
            selectedRows && selectedRows[0].coverImage,
          );
          setVideoSeletorOpen(false);
        }}
      >
        <ProTable
          search={false}
          headerTitle="选择视频"
          // actionRef={actionRef}
          rowKey="id"
          tableStyle={{ textAlign: 'center' }}
          options={false}
          dataSource={dataArray}
          pagination={pagination}
          onChange={handleTableChange}
          columns={columns}
          rowSelection={{
            type: 'radio',
            onChange: (_, selectedRows) => {
              setSelectedRows(selectedRows);
            },
          }}
        ></ProTable>
        <Modal
          open={playerModal}
          onCancel={() => {
            setPlayerModal(false);
            setVideoHttpUrl('');
          }}
          footer={[]}
          bodyStyle={{
            backgroundColor: 'rgba(,,,0.5)',
          }}
        >
          <video width="100%" height="240" src={videoHttpUrl} controls>
            {/* <source src="movie.ogg" type="video/ogg"/> */}
          </video>
        </Modal>
      </Modal>
    </div>
  );
};
export default VideoSelector;
